<template>
	<view>
		<!-- 自定义导航 -->
		<view class="d-flex j-sb px-2" style="height: 90rpx;">
			<!-- 左边 -->
			<view style="width: 85rpx;" class="d-flex a-center j-center">
				<!-- <text class="iconfont icon-xiaoxi"></text> -->
			</view>
			<!-- 右边 -->
			<view style="width: 85rpx;" class="d-flex a-center j-center">
				<text class="iconfont icon-jia" @click="addAddress"></text>
			</view>
		</view>
		<block v-for="(item,index) in list" :key="index">
			<uni-swipe-action :options="options" @click="bindClick($event,index)">
				<uni-list-item @click="choose(item)">
					<view class="text-secondary">
						<view class="d-flex a-center">
							<text class="main-text-color mr-2">{{item.name}} </text>
							{{item.phone}}
							<text v-if="item.is_default" class="main-text-color ml-1">
								[默认]</text>
						</view>
						<view class="">{{item.province}} {{item.city}} {{item.district}}</view>
						<view class="">{{item.address}}</view>
					</view>
				</uni-list-item>
			</uni-swipe-action>
		</block>
		<!-- 没有数据 -->
		<nothing v-if="list.length === 0" msg="空空如也"></nothing>
		<!-- 上拉加载更多 -->
		<divider />
		<view class="d-flex a-center j-center py-3">
			<text class="font-md text-light-muted">{{loadtext}}</text>
		</view>
	</view>
</template>

<script>
	import uniListItem from "@/components/uni-ui/uni-list-item/uni-list-item.vue"
	import uniSwipeAction from "@/components/uni-ui/uni-swipe-action/uni-swipe-action.vue"
	import {
		mapState,
		mapMutations
	} from "vuex"
	import nothing from "../../components/common/no-thing.vue"
	export default {
		components: {
			uniListItem,
			nothing,
			uniSwipeAction
		},
		data() {
			return {
				isChoose: false,
				options: [{
					text: '修改',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				page: 1,
				loadtext:"上拉加载更多"
			}
		},
		computed: {
			...mapState({
				'list': state => state.address.list
			}),
		},
		// 监听导航栏按钮点击
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				uni.navigateTo({
					url: '/pages/user-address-edit/user-address-edit'
				})
			}
		},
		onLoad(e) {
			if (e.type === "choose") {
				this.isChoose = true
			}
			this.getData()
			// 注册一个监听事件
			uni.$on('updateUserAddressList',()=>{
				this.page=1;
				this.getData()
			})
		},
		onUnload() {
			uni.off('updateUserAddressList')
		},
		onPullDownRefresh() {
			this.page = 1
			this.getData(() => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			// 是否已经处于加载状态
			if(this.loadtext !=='上拉加载更多') return;
			// 改变加载状态
			this.loadtext = '加载中...'
			this.page++
			// 请求数据
			setTimeout(() => {
			    this.getData(false);
			  }, 1500);
		},
		methods: {
			...mapMutations(['delAddress', 'updateAddressList']),
			// 获取数据
			getData(callback = false) {
				this.$H.get('/useraddress/' + this.page, {}, {
					token: true
				}).then(res => {
					console.log(res);
					let refresh = this.page === 1
					this.updateAddressList({
						refresh: refresh,
						list: res
					})
					this.loadtext = res.length < 5 ? '没有更多了' : '上拉加载更多'
					if (typeof callback === 'function') {
						uni.showToast({
							title: '刷新成功',
							icon: 'none'
						});
						callback()
					}

				}).catch(err => {
					if (typeof callback === 'function') {
						callback()
					}
					if(this.page>1){
						// 页码回归上一页
						this.page--
						this.loadtext = '上拉加载更多'
					}
				})
			},
			bindClick(value, i) {
				switch (value.index) {
					case 0: // 修改
						let obj = JSON.stringify({
							index: i,
							item: this.list[i]
						})
						uni.navigateTo({
							url: "/pages/user-address-edit/user-address-edit?data=" + obj,
						})
						break;
					case 1: // 删除
						uni.showModal({
							content: '要删除该收货地址吗',
							success: res => {
								if (res.confirm) {
									this.delAddress(i)
									this.$H.del('/useraddress/'+this.list[i].id,{},{
										token:true
									}).then((res)=>{
										uni.showToast({
										title: '删除成功'
									});
									})	
								} else if (res.cancel) {

								}
							},
						});

						break;
				}
			},
			// 选择收货地址
			choose(item) {
				if (this.isChoose) {


					// 通知订单提交页修改收货地址
					uni.$emit('chooseAddress', item)
					// 关闭当前页面
					uni.navigateBack({
						delta: 1
					});
				}
			},
			// 新增地址
			addAddress(){
				uni.navigateTo({
					url:'../user-address-edit/user-address-edit'
				})
			}
		}
	}
</script>

<style>

</style>